<template>
  <div id="app" :style="(isMobile?'overflow: hidden;':'')">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import watermark from "watermark-dom";
import { EventBus } from '@/views/youshuda/utils/event-bus'
import { mobileData } from '@/views/youshuda/base/mobile/util/mobileData'
import { generateUuid } from '@/views/youshuda/utils/youshuda'

export default {
  name: "App",
  components: { ThemePicker },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  created() {
    if(this.isMobile){
      this.getSystemInfo()
    }
  },
  methods:{
    /** 加载水印 **/
    loadWatermark(){
      /**
       * https://github.com/saucxs/watermark-dom?tab=readme-ov-file
       * 内置3种全局API方法：init()，load(), remove()。
       * watermark_txt:"测试水印，saucxs，测试水印，songEagle，工号等",  //水印的内容
       * watermark_color:'#5579ee',            //水印字体颜色
       * watermark_fontsize:'24px',          //水印字体大小
       * watermark_alpha:0.5,               //水印透明度，要求设置在大于等于0.005
       * watermark_angle:135,                 //水印倾斜度数
       * watermark_width:200,                //水印宽度
       * watermark_height:200,               //水印长度
       */
      let enabledSysWatermark =this.$store.getters.enabledSysWatermark
      let watermarkTxt =this.$store.getters.sysWatermark
      let config = {
        watermark_txt: watermarkTxt,               //水印的内容
        watermark_color:'#BFBFBFFF',        //水印字体颜
        watermark_fontsize:'16px',          //水印字体大小
        watermark_alpha:0.2,               //水印透明度，要求设置在大于等于0.005
        watermark_width:200,                //水印宽度
        watermark_height:200               //水印长度
      }
      if(enabledSysWatermark === '1' && watermarkTxt){
        watermark.load(config);
      }else{
        // watermark.init({ ...config, monitor: false })
        try{
          watermark.remove();
        }catch (e){}
      }
    },
    getSystemInfo(){
      let res = JSON.parse(decodeURIComponent(location.search.substring(location.search.indexOf('mobileData=')+11)))
      mobileData.appKey = res.appKey;
      mobileData.statusBarHeight = res.statusBarHeight;
    }
  },
  watch:{
    '$store.getters.sysLogo':{
      immediate:true,
      handler(val){
        if(val){
          let link = document.querySelector("link[rel*='icon']") || document.createElement('link');
          link.type = 'image/x-icon';
          link.rel = 'shortcut icon';
          link.href = val;
          document.getElementsByTagName('head')[0].appendChild(link);
        }
      }
    },
    '$store.getters.sysName':{
      immediate:true,
      handler(val,oldVal){
        if(val){
          document.title=val
        }
      }
    },
    '$store.getters.sysWatermark':{
      immediate:true,
      handler(val,oldVal){
        this.loadWatermark()
      }
    }
  }
};
</script>
<style scoped>
#app .theme-picker {
  display: none;
}
</style>
